<script setup>
// 无需额外逻辑
</script>

<template>
  <div class="structure-container">
    <h2>Vue项目结构详解</h2>

    <div class="structure-content">
      <div class="directory-tree">
        <h3>项目目录结构</h3>
        <ul class="tree">
          <li class="folder">
            <span>vue-test/</span>
            <ul>
              <li class="folder">
                <span>src/</span>
                <ul>
                  <li class="folder">
                    <span>assets/</span>
                    <span class="desc">- 静态资源文件（图片、样式等）</span>
                  </li>
                  <li class="folder highlight">
                    <span>components/</span>
                    <span class="desc">- 可复用的Vue组件</span>
                    <ul>
                      <li class="file"><span>TodoList.vue</span></li>
                      <li class="file"><span>Counter.vue</span></li>
                      <li class="file"><span>Documentation.vue</span></li>
                      <li class="file"><span>QuickStart.vue</span></li>
                      <li class="file"><span>ProjectStructure.vue</span></li>
                    </ul>
                  </li>
                  <li class="file highlight"><span>App.vue</span><span class="desc">- 应用的根组件</span></li>
                  <li class="file highlight"><span>main.js</span><span class="desc">- 应用入口文件</span></li>
                </ul>
              </li>
              <li class="folder">
                <span>public/</span>
                <span class="desc">- 静态资源目录，不会被webpack处理</span>
              </li>
              <li class="file">
                <span>index.html</span>
                <span class="desc">- HTML模板</span>
              </li>
              <li class="file">
                <span>vite.config.js</span>
                <span class="desc">- Vite配置文件</span>
              </li>
              <li class="file highlight">
                <span>package.json</span>
                <span class="desc">- 项目配置与依赖</span>
              </li>
              <li class="file">
                <span>README.md</span>
                <span class="desc">- 项目说明文档</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="file-explanations">
        <h3>重要文件说明</h3>
        
        <div class="file-card">
          <h4>package.json</h4>
          <p>项目的配置文件，包含项目名称、版本、依赖以及可执行的脚本命令。</p>
          <div class="code-block">
            {
              "name": "vue-test",
              "version": "0.0.0",
              "scripts": {
                "dev": "vite",          // 开发环境启动命令
                "build": "vite build",  // 生产环境构建命令
                "preview": "vite preview" // 预览构建结果
              },
              "dependencies": {
                "vue": "^3.5.13"       // Vue框架依赖
              },
              "devDependencies": {
                // 开发工具依赖
              }
            }
          </div>
        </div>

        <div class="file-card">
          <h4>main.js</h4>
          <p>应用的入口文件，用于创建Vue应用实例并挂载。</p>
          <div class="code-block">
            import './assets/main.css'
            import { createApp } from 'vue'
            import App from './App.vue'
            
            createApp(App).mount('#app')
          </div>
        </div>

        <div class="file-card">
          <h4>App.vue</h4>
          <p>应用的根组件，包含整个应用的基本结构和导航。</p>
          <div class="structure-diagram">
            <div class="diagram-box main">
              <span>App.vue</span>
              <div class="diagram-children">
                <div class="diagram-box">QuickStart</div>
                <div class="diagram-box">TodoList</div>
                <div class="diagram-box">Counter</div>
                <div class="diagram-box">Documentation</div>
                <div class="diagram-box">ProjectStructure</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="vue-specific">
        <h3>Vue单文件组件(.vue文件)结构</h3>
        <div class="vue-file-structure">
          <div class="vue-section script">
            <div class="section-header">
              &lt;script setup&gt;
            </div>
            <div class="section-content">
              JavaScript逻辑部分
              <ul>
                <li>导入组件和API</li>
                <li>定义响应式数据</li>
                <li>定义方法和计算属性</li>
                <li>声明生命周期钩子</li>
              </ul>
            </div>
          </div>
          
          <div class="vue-section template">
            <div class="section-header">
              &lt;template&gt;
            </div>
            <div class="section-content">
              HTML模板部分
              <ul>
                <li>组件的HTML结构</li>
                <li>使用插值和指令</li>
                <li>绑定事件和属性</li>
              </ul>
            </div>
          </div>
          
          <div class="vue-section style">
            <div class="section-header">
              &lt;style scoped&gt;
            </div>
            <div class="section-content">
              CSS样式部分
              <ul>
                <li>组件的样式定义</li>
                <li>scoped表示仅对当前组件生效</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.structure-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

h3 {
  color: #42b983;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 500;
}

h4 {
  color: #2c3e50;
  margin-top: 20px;
  margin-bottom: 10px;
}

.structure-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.directory-tree, .file-explanations, .vue-specific {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 目录树样式 */
.tree {
  font-family: 'Courier New', monospace;
  list-style: none;
  padding-left: 20px;
}

.tree ul {
  list-style: none;
  padding-left: 30px;
}

.tree li {
  position: relative;
  padding: 4px 0;
}

.folder::before {
  content: "📁";
  margin-right: 6px;
}

.file::before {
  content: "📄";
  margin-right: 6px;
}

.desc {
  color: #666;
  font-size: 14px;
  margin-left: 8px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.highlight {
  background-color: #e8f5e9;
  border-radius: 4px;
  padding: 2px 4px;
}

/* 文件说明卡片 */
.file-card {
  background-color: white;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.code-block {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  white-space: pre;
  overflow-x: auto;
  font-size: 14px;
  margin-top: 10px;
}

/* 组件结构图 */
.structure-diagram {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.diagram-box {
  border: 2px solid #42b983;
  border-radius: 4px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  background-color: #e8f5e9;
  min-width: 100px;
}

.diagram-box.main {
  background-color: #42b983;
  color: white;
  padding: 15px;
}

.diagram-children {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

/* Vue文件结构 */
.vue-file-structure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.vue-section {
  border-radius: 6px;
  overflow: hidden;
}

.section-header {
  padding: 10px;
  color: white;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}

.script .section-header {
  background-color: #2c3e50;
}

.template .section-header {
  background-color: #42b983;
}

.style .section-header {
  background-color: #ff7e67;
}

.section-content {
  padding: 15px;
  background-color: white;
  border: 1px solid #eee;
}

.section-content ul {
  margin-top: 10px;
  padding-left: 20px;
}

.section-content li {
  margin-bottom: 5px;
}
</style> 